/**
 * Created by txh on 2019/7/10.
 */
import React,{Component} from 'react'
import {Layout, Menu, Icon, Dropdown,DatePicker} from 'antd'
import {Router,Route,Link,Switch} from 'react-router-dom'
import './WtHome.css'
import './iconfont.js'
import WtBooksTable from "./books/WtBooksTable";
import history from './route/history'
import WtUserBooks from "./user-brower/WtUserBooks";
import WtForgotPassword from "./auth/WtForgotPassword";
const { Header, Sider, Content } = Layout;
class WtNormalLayout extends Component{
    render() {
        let items =[];
        items.push(<Route path="/home/book-list" component={WtBooksTable}/>);
        items.push(<Route path="/home/user-book" component={WtUserBooks}/>);
        items.push(<Route path="/home/userInfo-list" component={WtBooksTable}/>);
        items.push(<Route path="/home/changePassword-list" component={WtBooksTable}/>);

        return(
            <Layout className="mainLayout" style={{padding:'14px 0',background:"#fff"}}>
                <Content style={{padding:'0 24px',minHeight:780}} overlay="">
                    <Switch>
                        {items}
                    </Switch>
                </Content>
            </Layout>
        );
    }
}
class WtHome extends Component{
    constructor(props){
        super(props)
        this.state = {
            collapsed: false,
            mimg:false,
        };
    }
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
            mimg:!this.state.mimg,
        });
    };
    getImg(step){
        return step ?
            <img src={require('./img/logoA.png')} /> :
            <span>
                <img style={{marginLeft:'-14px'}} src={require('./img/logoA.png')}/>
                <span>图书管理系统</span>
            </span> ;
        // return step ? '南湖' : '南湖图书管理系统';
    }
    render() {
        const userMenu = (
            <Menu id="user-dropdown">
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                        <svg className="icon svg-icon" aria-hidden="true" id="drop-down-icon">
                            <use xlinkHref="#ic-account"/>
                        </svg>
                        个人账户
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                        <svg className="icon svg-icon" aria-hidden="true" id="drop-down-icon">
                            <use xlinkHref="#ic-dingbudaohang-zhangh"/>
                        </svg>
                        退出
                    </a>
                </Menu.Item>
            </Menu>
        );

        return (
                <Layout  id="wt-home">
                    <Sider style={{minHeight:981}} trigger={null} collapsible collapsed={this.state.collapsed}>
                        <div className="logo">
                            <span style={{fontSize:"1.6em",color:'#fff'}}>
                                {this.getImg(this.state.mimg)}
                            </span>
                        </div>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">
                                <Icon type="home"/>
                                <span>图书查询</span>
                                <Link to="/home/book-list"/>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Icon type="read" />
                                <span>我的图书</span>
                                <Link to="/home/user-book"/>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Icon type="user" />
                                <span>个人信息</span>
                                <Link to="/home/userInfo-list"/>
                            </Menu.Item>
                            <Menu.Item key="6">
                                <Icon type="setting" />
                                <span>修改密码</span>
                                <Link to="/home/changePassword-list"/>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                onClick={this.toggle}
                            />
                            <ul className="header-list-left">
                                <li>
                                    <a href="#" title="">
                                        <svg className="icon svg-icon" aria-hidden="true">
                                            <use xlinkHref="#icon-user"/>
                                        </svg>
                                        关于我们
                                    </a>
                                </li>
                                <li>
                                    <a href="#" title="">
                                        <svg className="icon svg-icon" aria-hidden="true">
                                            <use xlinkHref="#icon-safe"/>
                                        </svg>
                                        用户验证
                                    </a>
                                </li>
                                <li>
                                    <a href="#" title="">
                                        <svg className="icon svg-icon" aria-hidden="true">
                                            <use xlinkHref="#icon-feedback"/>
                                        </svg>
                                        意见反馈
                                    </a>
                                </li>
                                <li>
                                    <a href="#" title="">
                                        <svg className="icon svg-icon" aria-hidden="true">
                                            <use xlinkHref="#icon-exit"/>
                                        </svg>
                                        退出系统
                                    </a>
                                </li>
                            </ul>

                            <Dropdown overlay={userMenu}>
                                <a id='user-account' className="ant-dropdown-link" href="#">
                                    <svg id="username-icon" aria-hidden="true">
                                        <use xlinkHref="#icon-username"/>
                                    </svg>
                                    <span style={{marginRight:'10px', color:'#000'}}>欢迎</span>
                                    hello<Icon type="down" />
                                </a>
                            </Dropdown>,

                        </Header>
                        <Content
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                background: '#fff',
                                minHeight: 280,
                                // marginTop:'84px'
                            }}
                        >
                            <WtNormalLayout/>
                        </Content>
                    </Layout>
                </Layout>
        );
    }

}
export default WtHome;
